<template>
	<view class="container">
		<view class="header">
			<u-swiper :list="list.data.info.gallery" indicator indicatorMode="dot" circular height="300"
				interval="5000"></u-swiper>

			<view class="price-box">
				<view class="promotion">促销价格</view>
				<view class="price">
					<view class="curr-price">￥{{ list.data.info.retailPrice }}</view>
					<view class="ori-price">价格￥{{ list.data.info.counterPrice }}</view>
				</view>
				<view class="price-note">
					{{ list.data.info.brief }}
					<text class="note-border" v-if="list.data.brand.name == ''"></text>
					<text class="note-border" v-else>{{ list.data.brand.name }}</text>
					<text class="note-right">月销{{ list.data.info.sortOrder }}</text>
				</view>
				<view class="price-title">{{ list.data.info.name }}</view>
				<u-line />
			</view>
		</view>
		<!-- 选择框 -->
		<view class="parameter-box">
			<view class="ul">
				<!--选择-->
				<view class="li" @click="carshow = true">
					<view class="li-text">选择</view>
					<view class="li-icon">
						<u-icon name="arrow-right" />
					</view>
				</view>
				<!--参数-->
				<view class="li" @click="show = true">
					<view class="li-text">参数</view>
					<view class="li-icon">
						<u-icon name="arrow-right" />
					</view>
				</view>
				<!-- 参数表格 -->
				<view class="parameter-table">
					<u-popup :show="show" @close="close">
						<view class="table">
							<view class="table-h4">产品参数</view>
							<view class="tr">
								<view class="td" v-for="(item, index) in list.data.attribute">{{ item.attribute }}
								</view>
							</view>
							<view class="tr">
								<view class="td" v-for="(item, index) in list.data.attribute">{{ item.value }}</view>
							</view>
						</view>
					</u-popup>
				</view>
				<!-- 保障 -->
				<view class="li">
					<view class="li-text">保障</view>
					<text class="text-center">七天无理由退款</text>
					<view class="li-icon">
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view class="comment-box">
			<view class="top">
				<view class="top-text">评论总数({{ list.data.comment.count }})</view>
				<view class="top-right" @click="jumpcomment(list.data.info.id)">更多评论</view>
			</view>
			<u-line margin="20rpx 0"></u-line>
			<block v-for="(item, index) in list.data.comment.data">
				<view class="comment">
					<view class="left">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="name">{{ item.nickname }}</view>
						</view>
						<view class="image">
							<image :src="item.picList" mode=""></image>
						</view>
						<view class="content">{{ item.content }}</view>
						<view class="buttom">{{ item.addTime }}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 商品详情 -->
		<view class="productDet">
			<view class="det-title">宝贝详情</view>
			<view class="det-text">
				<view class="table">
					<block v-for="(item, index) in list.data.attribute">
						<view class="tr">
							<view class="td" style="width: 20vw; height: 3vh;">{{ item.attribute }}</view>
						</view>
						<view class="tr">
							<view class="td" style="width: 70vw; overflow: hidden; flex-wrap: nowrap; height: 3vh;">
								{{ item.value }}
							</view>
						</view>
					</block>
				</view>
			</view>
			<block v-html="productimg"></block>
		</view>
		<!-- 常见问题 -->
		<view class="commonproblem">
			<view class="commonproblem-title">常见问题</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in list.data.issue">
					<view class="h4">
						<text class="h4-text-color">*</text>
						{{item.question}}
					</view>
					<view class="text">
						{{item.answer}}
					</view>
				</view>
			</view>
		</view>
		<!-- 其他宝贝 -->
		<view class="otherbaby">
			<view class="other-title">其他宝贝</view>
			<view class="ul">
				<view class="li" v-for="(item, i) in list.data.relatedGoods" @click="shopdetails(item.id)">
					<view class="img">
						<image :src="item.picUrl"></image>
					</view>
					<view class="font">
						<view class="title">{{ item.name }}</view>
						<view class="price">{{ item.counterPrice }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="star" :size="30" :color="!userHasCollect?'#606266':'orange'" @click="star"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view>
				<view class="item car" @click="jumpcar">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="30" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">
						<view class="box" v-show="carcount">
							<u-badge :type="type" max="99" :value="value"></u-badge>
						</view>
						购物车
					</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="carshow = true">加入购物车</view>
				<view class="buy btn u-line-1" @click="carshow = true">立即购买</view>
			</view>
		</view>
		<!-- 商品购买框 -->
		<view class="car-box">
			<u-popup :show="carshow" @close="closeCar">
				<view class="car-head">
					<view class="car-head-img">
						<image :src="showproduct.url" mode=""></image>
					</view>
					<view class="car-head-text">
						<view class="car-head-text-name">{{list.data.info.name}}</view>
						<view class="car-head-text-price">
							<label for="">¥</label>
							<text>{{showproduct.price===undefined?'0':showproduct.price}}/{{list.data.info.unit}}</text>
						</view>
						<view class="car-head-text-parameter">
							<text v-for="(item,index) in productitem">{{item}}</text>
						</view>
					</view>
				</view>
				<view class="car-nav">
					<view class="car-sele" v-for="(item, index) in carlist" :key="index">
						<view class="car-name">{{ item.name }}</view>
						<view class="car-list">
							<text :class="params[item.name]==item2.value?'rmoiu':''"
								@click="carIndex(item.name,item2.value)" v-for="(item2, index2) in item.valueList"
								:key="index2">
								{{ item2.value }}
							</text>
						</view>
					</view>
				</view>
				<view class="car-number">
					<view class="car-number-name">
						数量
					</view>
					<view class="car-number-rednumber">
						<u-number-box button-size="20" color="#ffffff" bg-color="#fcb100" icon-style="color: #fff"
							v-model="number" class="unumber"></u-number-box>
					</view>
				</view>
				<view class="car-ready">
					<view class="right" v-if="productshow">
						<view class="cart btn u-line-1" @click="cartlist">加入购物车</view>
						<view class="buy btn u-line-1" @click='carok'>立即购买</view>
					</view>
					<view class="right" v-else>
						<view class="cart btn u-line-1" style="background-color: #bababa;">加入购物车</view>
						<view class="buy btn u-line-1" style="background-color: #bababa;">商品售馨</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false, //控制参数显示隐藏
				productimg: ``,
				carshow: false, //控制购物车显示隐藏
				carlist: [], //购物车数据源
				params: {}, //选中的购物车数据
				number: 1, //数量
				productList: {}, //商品库存数据
				productshow: true, //购物车商品售馨开关
				productitem: [], //选择后的商品数据显示
				showproduct: {}, //选中后商品数据
				type: "warning", //购物车圆点背景
				value: null, //购物车数量
				carcount: false, //判断购物车数量显示隐藏
				userHasCollect:1,
				id:-1,
				carid:0,//购物车id
			};
		},
		onShow() {
			this.$get(this.API.goodscount).then(res => {
				this.value = res.data.data
			})
			if (this.value != null) return this.carcount = true
		},
		methods: {
			valChange(e) {
				console.log('当前值为: ' + e.value);
			},
			close() {
				this.show = false;
			},
			closeCar() {
				this.carshow = false;
			},
			shopdetails(e) {
				uni.navigateTo({
					url: '../../pages/shopdetails/shopdetails?id=' + e
				});
			},
			//购买数据
			carIndex(key, value) {
				this.params[key] = value;
				this.params = {
					...this.params
				};
				for (let i = 0; i < this.productList.length; i++) {
					let prodlist = this.productList[i]
					let str = []
					for (let k in this.params) {
						str.push(this.params[k])
					}
					console.log(str + '')
					if (str.sort() + '' === prodlist.specifications.sort() + '') {
						this.showproduct = prodlist
						str.push('剩余' + prodlist.number)
						this.productitem = str
						// console.log(str)
						if (prodlist.number == 0) {
							this.productshow = false
						} else {
							this.productshow = true
						}
					}

				}

			},
			//加入购物车
			cartlist() {
				this.cartfun('add')
				this.carshow = false;
			},
			//立即购买按钮事件
			carok() {
				this.cartfun('fastadd')
			},
			//跳转到购物车
			jumpcar() {
				uni.switchTab({
					url: '/pages/shopcar/shopcar'
				})
			},
			//跳转到评论
			jumpcomment(e) {
				uni.navigateTo({
					url: '/pages/comment/comment?id=' + e
				})
			},
			//收藏
			star() {
				if(this.$store.state.Key==''){
					uni.showToast({
						title: '登录后进行购买',
						icon: 'error',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/register/register'
						})
					}, 2000)
				}else{
					this.$post(this.API.addordelete,{type:0,valueId:this.list.data.info.id}).then(res=>{
						this.userHasCollect= !this.userHasCollect
						if(this.userHasCollect){
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							});
						} else{
							uni.showToast({
								title: '取消收藏',
								icon: 'none',
								duration: 2000
							});
						}
						
					})
				}
				
				
			},
			//封装购买函数
			cartfun(URL) {
				if (this.number > this.showproduct.number) { //判断数量是否超过库存
					this.number = this.showproduct.number
					uni.showToast({
						title: '商品已到最大可选数量',
						icon: 'none',
						duration: 2000
					});
				} else {
					let token = this.$store.state.Key;
					console.log(token)
					if (token == '') { //判断是否有token
						uni.showToast({
							title: '登录后进行购买',
							icon: 'error',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/user/register/register'
							})
						}, 2000)
					} else { //传入参数
						this.$post(this.API[URL], {
							goodsId: this.showproduct.goodsId,
							number: this.number,
							productId: this.showproduct.id
						}).then((res) => {
							console.log(res.data)
							if (res.data.errno == 0) {
								uni.showToast({
									title: res.data.errmsg,
									icon: 'success',
									duration: 2000
								})
								this.carid=res.data.data
								if(URL=='fastadd'){
									setTimeout(()=>{
										uni.navigateTo({
											url:'/pages/fastadd/fastadd?carid='+this.carid
										})
									},2000)
								}
							} else {
								uni.showToast({
									title: res.data.errmsg,
									icon: 'error',
									duration: 2000
								})
							}

						})
					}

				}

			},

		},
		onLoad(option) {
			this.id = option.id
		},
		onShow() {
		this.$get(this.API.detail, {
			id: this.id
		}).then(res => {
			this.list = res.data;
			console.log(this.list.data)
			this.userHasCollect=res.data.data.userHasCollect
			this.productimg = res.data.data.info.detail.replace(/<\/p><p>/g, '');
			this.productimg = this.productimg.replace(/<\/p><p>/g, '');
			this.productimg = this.productimg.replace(/<img /g, '<img class="img" ');
			this.picUrl = res.data.data.info.picUrl
			this.retailPrice = res.data.data.info.retailPrice
			this.carlist = res.data.data.specificationList
			this.productList = res.data.data.productList
		});
		}

	};
</script>

<style lang="scss" scoped>
	$background: #f5f5f5;
	$padding: 20rpx;
	$margin: 10rpx 30rpx;

	.container {
		.header {
			.price-box {
				margin: $margin;
				padding: $padding;
				background-color: $background;
				border-radius: 10rpx;

				.promotion {
					border-radius: 20rpx;
					display: inline-block;
					padding: 10rpx;
					font-size: 20rpx;
					color: #fcb100;
				}

				.price {
					width: 100vw;
					line-height: 5vh;

					&::after,
					&::before {
						display: table;
						clear: both;
						content: '';
					}

					.curr-price {
						font-size: 55rpx;
						float: left;
						color: #e45656;
					}

					.ori-price {
						margin-top: 10rpx;
						font-size: 25rpx;
						margin-left: 15rpx;
						float: left;
						text-decoration: line-through;
						color: #a6a6a7;
					}
				}

				.price-note {
					font-size: 20rpx;
					color: #ff5500;

					.note-right {
						float: right;
					}

					.note-border {
						margin-left: 15rpx;
						border-radius: 20rpx;
						color: #ffffff;
						background-color: #ff5500;
						padding: 3rpx 10rpx;
					}
				}

				.price-title {
					font-size: 35rpx;
					margin: 20rpx 0;
				}
			}
		}

		//产品详情盒子
		.parameter-box {
			margin: $margin;
			padding: $padding;
			background-color: $background;
			border-radius: 10rpx;

			.ul {

				&::after,
				&::before {
					display: table;
					content: '';
					clear: both;
				}

				.li {
					height: 5vh;
					line-height: 5vh;

					.li-text {
						float: left;
						// display: inline-block;
					}

					.text-center {
						margin-left: 50rpx;
						font-size: 25rpx;
					}

					.li-icon {
						// display: inline-block;
						margin-top: 12px;
						float: right;
					}
				}
			}

			.table {
				width: 90vw;
				margin: 0 auto;
				margin-bottom: 40rpx;
				font-size: 25rpx;

				.table-h4 {
					text-align: center;
					line-height: 10vh;
				}

				.tr {
					float: left;

					.td {
						width: 45vw;
						line-height: 5vh;
					}
				}
			}
		}

		//评论盒子
		.comment-box {
			padding: 30rpx;

			.top {

				&::after,
				&::before {
					display: table;
					clear: both;
					content: '';
				}

				line-height: 5vh;

				.top-text {
					float: left;
				}

				.top-right {
					float: right;
				}
			}

			.comment {
				display: flex;
				margin-bottom: 40rpx;

				.left {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #f2f2f2;
					}
				}

				.right {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;

					.top {
						// display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							color: #5677fc;
						}
					}

					.content {
						margin-bottom: 10rpx;
					}

					.bottom {
						margin-top: 20rpx;
						display: flex;
						font-size: 24rpx;
						color: #9a9a9a;

						.reply {
							color: #5677fc;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		// 商品详情盒子
		.productDet {
			.det-title {
				text-align: center;
				line-height: 10vh;
			}

			.det-text {
				margin-bottom: 30rpx;

				.table {
					margin: 0 auto;
					width: 90vw;

					&::after,
					&::before {
						display: table;
						clear: both;
						content: '';
					}

					.tr {
						background-color: #999999;
						color: #fff;
						float: left;
						text-align: center;
					}
				}
			}

			::v-deep .img {
				font-size: 0;
				display: block;
				width: 100vw;
			}
		}

		//常见问题
		.commonproblem {
			margin-bottom: 150rpx;

			.commonproblem-title {
				text-align: center;
				line-height: 10vh;
			}

			.ul {
				width: 90vw;
				margin: 0 auto;

				.li {
					margin-top: 10rpx;

					.h4 {
						.h4-text-color {
							color: #ff0004;
							padding-right: 10rpx;
						}
					}

					.text {
						color: #aaaaaa;
						font-size: 25rpx;
						margin-top: 10rpx;
						word-wrap: break-word;
						padding-left: 23rpx;
					}
				}
			}
		}

		//其他宝贝
		.otherbaby {
			margin-bottom: 150rpx;

			.other-title {
				text-align: center;
				line-height: 10vh;
			}

			.ul {

				&::after,
				&::before {
					display: table;
					content: '';
					clear: both;
				}

				.li {
					background-color: $uni-bg-color;
					width: 48%;
					float: left;
					margin-left: 1%;
					margin-bottom: 1%;

					.img {
						image {
							width: 50vw;
							height: 30vh;
						}
					}

					.font {
						text-align: center;
						text-overflow: ellipsis;

						.title {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		//购物车
		.navigation {
			position: fixed;
			top: 92.5vh;
			width: 100vw;
			z-index: 99;
			display: flex;
			border: solid 2rpx #f2f2f2;
			background-color: #ffffff;
			padding: 16rpx;

			.left {
				display: flex;
				font-size: 20rpx;

				.item {
					margin: 0 30rpx;

					.u-line-1 {
						text-align: center;
					}

					.box {
						position: absolute;
						// padding: 5rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: #909193;
						border-radius: 50%;
						top: -9rpx;
						left: 27rpx;
					}

					&.car {
						text-align: center;
						position: relative;

						.car-num {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}

			.right {
				flex: 1;
				display: flex;
				font-size: 25rpx;
				align-items: center;

				.btn {
					line-height: 66rpx;
					padding: 0 30rpx;
					border-radius: 36rpx;
					color: #ffffff;
				}

				.cart {
					background-color: #ed3f14;
					margin-right: 30rpx;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}

		//购物车详情
		.car-box {
			.car-head {
				width: 94%;
				height: auto;
				margin: 0px auto;
				border-bottom: 1px #eee solid;
				display: flex;
				flex-direction: row;
				padding: 20rpx 0px;

				.car-head-img {
					width: 25%;

					image {
						width: 100%;
						height: 200rpx;
						border: 1px #eee solid;
						display: block;
					}
				}

				.car-head-text {
					width: 75%;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					padding-left: 3%;
					justify-content: space-around;

					.car-head-text-name {
						font-size: 16px;
						font-weight: bold;
						width: 90%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #444;
					}

					.car-head-text-price {
						display: flex;
						flex-direction: row;
						color: #eaa02c;
						display: table-cell;
						vertical-align: bottom;

						label {
							font-size: 12px;
							font-weight: bold;
							margin-right: 2%;
						}

						text {
							font-size: 18px;
						}
					}

					.car-head-text-parameter {
						font-size: 13px;
						color: #888;

						text {
							margin-right: 3%;
						}
					}
				}
			}

			.car-nav {
				.car-sele {
					width: 100%;
					height: auto;
					box-sizing: border-box;
					padding: 0px 3%;

					.car-name {
						width: 100%;
						height: auto;
						font-size: 15px;
						color: #333;
						margin-bottom: 15px;
					}

					.car-list {
						width: 100%;
						height: auto;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						text {
							margin: 0px 0%;
							border-radius: 4px;
							text-align: center;
							box-sizing: border-box;
							min-width: 30%;
							border: 1px #fe7b2e solid;
							margin-bottom: 15px;
							font-size: 14px;
							line-height: 33px;
							padding: 0px 2%;
							margin-right: 3%;
						}
					}
				}

				.rmoiu {
					color: #FFFFFF;
					background-color: #fe7b2e;
				}
			}

			.car-number {
				width: 100%;
				height: auto;
				box-sizing: border-box;
				padding: 40rpx 5%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 80px;

				.unumber {
					border-radius: 50%;
				}
			}

			.car-ready {
				display: flex;
				padding: 10px 3%;
				border-top: 1px #eee solid;
				position: fixed;
				top: 92vh;
				// top: 0;
				z-index: 99;
				display: flex;
				border: solid 2rpx #f2f2f2;
				background-color: #ffffff;
				padding: 16rpx;
				.right {
					width: 100vw;
					flex: 1;
					display: flex;
					font-size: 25rpx;
					align-items: center;

					.btn {
						line-height: 80rpx;
						padding: 0 0rpx;
						border-radius: 36rpx;
						color: #ffffff;
					}

					.cart {
						text-align: center;
						width: 47vw;
						background-color: #ed3f14;
						margin-right: 10rpx;
					}

					.buy {
						text-align: center;
						width: 47vw;
						background-color: #ff7900;
					}
				}
			}
		}
	}
</style>
